<template> 
    <div class="inputWrapper">
        <span :class="ico"></span>
        <input 
            :type="type" 
            :placeholder="placeholder"
            v-model="inputValue"
            :class="{
                success:isValid,
                error:!isValid
            }"
            @blur="showTips"
        >   
    </div>
</template>
<script>

export default {
  props:["placeholder","type","err_message","ico","rule"],
  data() {
      return {
          inputValue:"",
          isValid:true
      }
  },
  watch:{
      inputValue() {
          const reg = new RegExp(this.rule)
          console.log(reg);
          if (reg.test(this.inputValue)) {
              this.isValid = true
            //   console.log("通过了校验");
              
          }else {
              this.isValid = false
              console.log(this.err_message);
              
          }
          this.$emit('valueChanged',this.inputValue)
      }
  },
  methods:{
      showTips() {
          if (!this.isValid) {
              this.$toast.fail({
                  message:this.err_message
              })
          }
      }
  }
}
</script>

<style lang="less" scoped>
    .inputWrapper {
        display: flex;
        justify-content: center;
        height: 30px;
        line-height: 30px;
        margin: 20px 0;
        span {
            height: 30px;
            line-height: 30px;
        }
        input {
            width:80%;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            outline: none;
            border: 1px solid #333;
            padding-left: 15px;
            margin-left: 10px;
        }
    }
</style>